<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.css" rel="stylesheet">
	<script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<!-- 	<link  href="js/12/leaflet.css"/>
	<script src="js/12/leaflet.js"></script> -->
	<script src="js/12/leaflet.wmts.js"></script>
	<!-- 引入leaflet-draw -->
	<script src="./js/leaflet-draw/dist/leaflet.draw-src.js"></script>
	<link rel="stylesheet" href="./js/leaflet-draw/dist/leaflet.draw-src.css">

	<script src="./js/leaflet-lasso.umd.js"></script>

	<!-- 引入leaflet-measure-path -->
	<link rel="stylesheet" href="./js/leaflet-measure-path.css">
	<!-- <script src="./js/leaflet-measure-path.js"></script> -->
	<!-- <script src="js/leaflet-tilelayer-wmts.js"></script> -->

	<script src="./js/Leaflet.Editable.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.js"></script>
	<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
		}

		* {
			margin: 0px;
			padding: 0px;
		}

		#pdbmap {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

<body>
	<div id="pdbmap">
		<!-- 底图 -->
		<div class="map_box" id="dituContent" style="width:100%; height:100%;">
		</div>
		<!-- 地图切换 -->
		<div class="map-change">
			<div class="map-item" v-for="(item,index) in mapUrl" :key="index">
				<div style="display: flex;flex-direction: column;" @click='changemap(item)'>
					<img style="width: 75px;height: 75px;border-radius: 6px;" :src=item.imghare />
				</div>
				<div class="map-type">
					{{item.tite}}</div>
			</div>
		</div>
		<!-- 地图工具 -->
		<div class="self-tools">
			<a class="delete-tools" @click="stopDraw()">
				<span class="sr-only">删除</span>
			</a>
		</div>
		<div style="position: absolute;bottom: 10px; left: 10px;z-index: 99999999999;width: 50%;">
			<div style="display: flex;justify-content:space-between;width: 100%;">
				 <el-button size="small" type="primary" plain @click='startTagging(1)' v-if='!callType'>开始标注</el-button>
				 <el-button size="small" type="primary" plain @click='startTagging(1)' v-if='callType'>重新标注</el-button>
				 <el-button size="small" type="primary" plain @click='startTagging(0)'>清除标注</el-button>
				 <el-button size="small" type="primary" plain @click='selectGeoJson'>确定选点</el-button>
				 <el-button size="small" type="primary" plain @click='sendMess'>保存并关闭</el-button>
			</div>
		</div>
	</div>
</body>
<script src="js/gcoord.js"></script>
<script>
	const urlMap = 'https://map.pipechina.com.cn/wmts';
	new Vue({
		el: "#pdbmap",
		data() {
			return {
				map: null,
				// 图层组
				highs: null,
				// 绘制线的所有点
				pointnods: [],
				pointISLine: false, //false点，true 线
				zoomList: [
					20000000, 1000000, 500000, 200000, 100000, 50000, 20000, 10000,
					5000, 2000, 1000, 500, 200, 100, 50, 20, 10, 5, 1
				],
				// 获取点击的坐标
				dataLngLat: [],
				tPipeLineId: '',
				mapUrl: [
					{
						tite: "矢量图",
						imghare: "./img/vec.jpg",
						Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
						minimumLevel: 4,
						maximumLevel: 18,
						layerobj: {},
						index:0,
						type:"vec"
					},
					{
						tite: "影像图",
						imghare: "./img/img.jpg",
						Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
						minimumLevel: 3,
						maximumLevel: 18,
						layerobj: {},
						index:0,
						type:"img"
					},
					{
						tite: "地形图",
						imghare: "./img/ter.jpg",
						Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
						minimumLevel: 4,
						maximumLevel: 18,
						layerobj: {},
						index:0,
						type:"ter"
					},
				],
				mapSelectClick:false,//判断是否开始标注
				drawLayerGrounp:null,
				drawControl:null,
				highlight:null,
				formDataObj:null,
				contentData:null,
				callType:null,//false新增调用 true 修改调用
				editId:"",//回显数据id
				tableName:"",//回显数据表名
				showWeight:20,//宽度
				showColor:"#ffff00",//颜色
				wmtsMap:null,
				wmtsMapZ:null
			}
		},
		methods: {
			// 定位几何
			
			// 开始标注
			
			// 确定选点
			
			onLoad() {
				// let that = this
				// this.map = L.map('dituContent', {
				// 	center: [33.84371698169494, 108.77701128694328],
				// 	zoom: 5,
				// 	zoomControl: false,
				// 	attributionControl: false
				// }); //默认显示16层级，设置默认加载中心点经纬度
				// var wmtsOptionsMap = {
				//   type: 'wmts',
				//   layer:'img',
				//   format:'tiles',
				//   style: 'default',
				//   tilematrixset: "w",
				//   // wrapX: false,
				//   version: "1.0.0",
				//   request:'GetTile',
				// }
				// this.wmtsMap = new L.TileLayer.WMTS(urlMap,wmtsOptionsMap)
				// this.wmtsMap.setZIndex(0);
				// this.map.addLayer(this.wmtsMap)
				let that = this
				this.map = L.map('dituContent', {
					center: [33.84371698169494, 108.77701128694328],
					zoom: 5,
					zoomControl: false,
					attributionControl: false
				}); //默认显示16层级，设置默认加载中心点经纬度
				this.highsLary = new L.FeatureGroup();
				this.map.addLayer(this.highsLary);
				this.highs = new L.FeatureGroup();
				this.map.addLayer(this.highs);
				var param = "lang=zh_cn&style=7&ltype=0&scl=0&size=0"
				this.wmtsMap = L.tileLayer.gaoDeTileLayer(param)
				this.map.addLayer(this.wmtsMap)
				// var wmtsOptionsMapcia = {
				//   type: 'wmts',
				//   layer:'cia',
				//   format:'tiles',
				//   style: 'default',
				//   tilematrixset: "w",
				//   wrapX: false,
				//   version: "1.0.0",
				//   request:'GetTile',
				//   // tilematrixset: "w",
				//   // matrixIds: matrixIds,//可缩放
				// }
				// this.wmtsMapZ = new L.TileLayer.WMTS(urlMap,wmtsOptionsMapcia)
				// this.wmtsMapZ.setZIndex(1);
				// this.map.addLayer(this.wmtsMapZ)
				// this.wmtsMap.bringToBack()
				// this.map.on('click ', (e) => {})
			},
			
			
			// 地图切换
			changemap(data) {
				this.map.removeLayer(this.wmtsMap)
				if(data.type=='vec'){
				   var param = "lang=zh_cn&style=7&ltype=0&scl=0&size=0"
				this.wmtsMap = L.tileLayer.gaoDeTileLayer(param)
				}
				if(data.type=='img'){
				  var param = "lang=zh_cn&style=6&ltype=0&scl=0&size=0"
				 this.wmtsMap = L.tileLayer.gaoDeTileLayer(param)
				}
				if(data.type=='ter'){
				  var param = "lang=zh_cn&style=8&ltype=0&scl=0&size=0"
				  this.wmtsMap = L.tileLayer.gaoDeTileLayer(param)
				}
				this.map.addLayer(this.wmtsMap)
				
				// this.map.removeLayer(this.wmtsMapZ)
				// this.map.removeLayer(this.wmtsMap)
				// var wmtsOptionsMap = {
				//   type: 'wmts',
				//   layer:data,
				//   format:'tiles',
				//   style: 'default',
				//   tilematrixset: 'w',
				//   wrapX: false,
				//   version: "1.0.0",
				//   request:'GetTile',
				//   // tilematrixset: "w",
				//   // matrixIds: matrixIds,//可缩放
				// }
				// this.wmtsMap = new L.TileLayer.WMTS(urlMap,wmtsOptionsMap)
				// this.wmtsMap.setZIndex(0);
				// this.map.addLayer(this.wmtsMap)
				// this.wmtsMap.bringToBack()
				// var wmtsOptionsMapcia = {
				//   type: 'wmts',
				//   layer:'cia',
				//   format:'tiles',
				//   style: 'default',
				//   tilematrixset: "w",
				//   wrapX: false,
				//   version: "1.0.0",
				//   request:'GetTile',
				//   // tilematrixset: "w",
				//   // matrixIds: matrixIds,//可缩放
				// }
				// this.wmtsMapZ = new L.TileLayer.WMTS(urlMap,wmtsOptionsMapcia)
				// this.wmtsMapZ.setZIndex(1);
				// this.map.addLayer(this.wmtsMapZ)
			},
			// 初始化绘制控件
			
			// 交互绘制回调
			
			// 获取面积
			
			// 获取长度
			
			
			//清除绘制
			
			
		},
		created() {},
		mounted() {
			L.TileLayer.GaoDeTileLayer = L.TileLayer.extend({
			  initialize: function (param, options) {
			    var templateUrl = "//wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&{p}"
			    // var templateUrl = "//webst{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&{p}"
			    options = L.extend({ p: param, subdomains: "1234", minZoom: 0, maxZoom: 23, minNativeZoom: 1, maxNativeZoom: 18 }, options)
			    L.TileLayer.prototype.initialize.call(this, templateUrl, options)
			  },
			  _setZoomTransform: function (level, center, zoom) {
			    center = L.latLng(gcoord.transform([center.lng, center.lat], gcoord.WGS84, gcoord.GCJ02).reverse()) // 采用 gcoord 库进行纠偏
			    L.TileLayer.prototype._setZoomTransform.call(this, level, center, zoom)
			  },
			  _getTiledPixelBounds: function (center) {
			    center = L.latLng(gcoord.transform([center.lng, center.lat], gcoord.WGS84, gcoord.GCJ02).reverse()) // 采用 gcoord 库进行纠偏
			    return L.TileLayer.prototype._getTiledPixelBounds.call(this, center)
			  },
			})
			L.tileLayer.gaoDeTileLayer = function (param, options) { return new L.TileLayer.GaoDeTileLayer(param, options) }
			this.onLoad()	
		}
	})
</script>

</html>